<template>
	<view class="ayi-page">
		<navigation :isBack="true" title="优惠活动" titleTintColor="#fff"><text slot="back" class="iconfont">&#xe63d;</text></navigation>
		<view class="p-c-header">
			<view class="p-c-h-item" @click="selectTab(0)" :class="{ active: selctStatus == 0 }">全部</view>
			<view class="p-c-h-item" @click="selectTab(1)" :class="{ active: selctStatus == 1 }">VIP会员</view>
			<view class="p-c-h-item" @click="selectTab(2)" :class="{ active: selctStatus == 2 }">彩票券</view>
			<view class="p-c-h-item" @click="selectTab(3)" :class="{ active: selctStatus == 3 }">其它</view>
		</view>
		<view class="p-c-contain" v-show="selctStatus == 0"><parser :tag-style="tagStyle" img-mode="widthFix" :html="promotionData.all"></parser></view>
		<view class="p-c-contain" v-show="selctStatus == 1"><parser :tag-style="tagStyle" img-mode="widthFix" :html="promotionData.give"></parser></view>
		<view class="p-c-contain" v-show="selctStatus == 2"><parser :tag-style="tagStyle" img-mode="widthFix" :html="promotionData.lottery"></parser></view>
		<view class="p-c-contain" v-show="selctStatus == 3"><parser :tag-style="tagStyle" img-mode="widthFix" :html="promotionData.other"></parser></view>
		<Tabbar :indexpage="-1"></Tabbar>
	</view>
</template>

<script>
import { Tools, Config, URL, Net, VueTools } from '@/common/tools.js';
import navigation from '@/components/navigation.vue';
import Tabbar from '@/components/tabbar.vue';
import parser from '@/components/parser/index';
export default {
	components: { Tabbar, navigation, parser },
	data() {
		return {
			selctStatus: 0, //选中的标记
			promotionData: { all: '', give: '', lottery: '', other: '' }, //数据源
			tagStyle: {
				img: '100%'
			}
		};
	},
	onLoad() {
		this.promotionNet();
	},
	methods: {
		/**
		 * 选中的tab数据
		 */
		selectTab(mark) {
			this.selctStatus = mark;
		},
		promotionNet() {
			let that = this;
			Net.ayiHttp(
				URL.OTHER_CONFIG,
				'{"type":"promotes"}',
				function(res) {
					if (res.code == Config.SUCCESS_CODE) {
						//成功的逻辑
						let data = Tools.aesDecodeToJson(res.data);
						console.log('获取优惠活动的数据', data);
						that.promotionData = { all: data.all.cfg_val, give: data.give.cfg_val, lottery: data.lottery.cfg_val, other: data.other.cfg_val };
					} else if (res.code == Config.FAIL_CODE) {
						VueTools.toastNo(res.message);
					} else if (res.code == Config.LOGIN_CODE) {
						uni.navigateTo({
							url: '/pages/my/login/login'
						});
					}
				},
				function(err) {
					console.log('error:', err);
				}
			);
		}
	},
	onUnload() {}
};
</script>

<style lang="scss">
.p-c-header {
	height: 80rpx;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	background: #f1f1f1;
	.p-c-h-item {
		flex: 1;
		text-align: center;
		border-bottom: 2px solid #e8e9ec;
		font-size: 28rpx;
		font-weight: bold;
		color: #666;
		height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		&.active {
			border-bottom: 2px solid $wlh-color-defealt;
		}
	}
}
</style>
